<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="../lib/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 400px"></div>
		<script>
			var mCharts = echarts.init(document.querySelector('div'))
      var pieData = [
        {
          name:'淘宝',
          value: 11201
        },
        {
          name:'京东',
          value: 29010
        },
        {
          name:'唯品会',
          value: 8500
        },
        {
          name:'1号店',
          value: 9922
        },
        {
          name:'聚美优品',
          value: 5920
        }
      ]
			
      var option = {
				series: [
          {
            type: 'pie',
            data: pieData,
            label: {
              show: true,
              formatter: function(arg) { // 决定文字显示内容
                // console.log(arg)
                return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
              }
            },
            // radius: 40 // 半径
            // radius: '20%' // 百分比参照宽高较小一部分的一半
            // radius:['50%','75%'] // 第0个元素代表内圆半径，第一个元素代表外圆半径
            roseType: 'radius', // 南丁格尔图 饼图的每个区域的半径是不同的
            selectedMode: 'single', // 选中的效果，能够将选中的区域偏离圆点一小段距离
            selectedOffset: 30 // 偏移量
          }
        ]
			}
			mCharts.setOption(option)
		</script>
	</body>
</html>
